import React, { useRef, useEffect } from 'react'
import * as echarts from 'echarts';
import "./index.scss"

export default function Footer() {
    const charTrisk = useRef()
    useEffect(() => {
        const initCharTrisk = echarts.init(charTrisk.current)

        const option = {
            legend: { top: '5%' },
            tooltip: {},
            title: {
                text: '搜索字数统计(万)'
            },
            dataset: {
                source: [
                    ['日期', '中文搜索', '英文搜索', '粤语搜索', '韩语搜索'],
                    ['12/1', 3.3, 5.22, 2.31, 2.25, 0.9],
                    ['12/2', 0.38, 4.26, 1.85, 1.56, 0.81],
                    ['12/3', 0.5, 4.4, 0, 2.9, 2.19],
                    ['12/4', 0, 4.32, 1.71, 3.33, 0.9],
                    ['12/5', 1.24, 3.14, 2.46, 8.62, 0.81],
                    ['12/6', 0, 4.06, 0.96, 5, 0],
                    ['12/7', 0.61, 4.33, 4, 2.65, 0],
                    ['12/8', 0, 3.27, 0.59, 2.17, 0.8],
                    ['12/9', 0, 2.2, 2.86, 2.7, 0],
                    ['12/10', 0.68, 2.5, 1.09, 1.83, 0],
                    ['12/11', 1.01, 3, 0, 1.98, 0.55],
                    ['12/12', 12.18, 8.29, 6.93, 10.74, 7.41],
                    ['12/13', 4.03, 3.31, 2.65, 4.72, 3.74],
                    ['12/14', 3.52, 4.6, 1.29, 1.77, 1.05],
                    ['12/15', 0.77, 6.21, 2.4, 4.12, 3.23],
                    ['12/16', 0, 5.65, 3.92, 2.73, 1.95],
                    ['12/17', 0, 2.61, 1.98, 3.33, 3.92],
                    ['12/18', 0, 3.48, 2.32, 0, 0],
                    ['12/19', 1.54, 3.41, 0.78, 0, 0],
                    ['12/20', 0, 1.75, 0.19, 0, 1.12],
                    ['12/21', 1.37, 4, 1.13, 4.44, 1.95],
                    ['12/22', 0, 3.64, 0.96, 1.64, 1.19],
                    ['12/23', 0, 3.64, 0.94, 0, 1.19],
                    ['12/24', 2.56, 4.8, 1.06, 0, 2.84],
                    ['12/25', 2.38, 3.96, 0.69, 0, 3.33],
                    ['12/26', 0, 3.3, 1.65, 0, 1.74],
                    ['12/27', 0, 6.32, 0.64, 2.94, 0.86],
                    ['12/28', 0, 3.09, 1.07, 4.35, 0],
                    ['12/29', 2.19, 2.75, 0, 9.68, 1.32],
                    ['12/30', 1.09, 4.62, 1.53, 0, 3.62],
                    ['12/31', 3.39, 7.37, 3.15, 0, 2.08],
                ]
            },
            xAxis: { type: 'category' },
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [{ type: 'line' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
        };

        initCharTrisk.setOption(option)
    })


    return (
        <div className='footer'>
            <div className='char_trisk' ref={charTrisk}></div>
        </div>
    )
}
